// src/app/posts/[id]/page.tsx
'use client';
import React, {useEffect, useState} from 'react';
import {useRouter} from "next/navigation";
import Post from "@/app/forum/_components/post";
import Widgets from "@/app/forum/_components/widgets";
import CommendModal from "@/app/forum/_components/commendModal";
import Sidebar from "@/app/forum/_components/sidebar";
import {ArrowLeftIcon, SparklesIcon} from "@heroicons/react/outline";
import {getUsers} from "@/data/forum/user";
import {getNews} from "@/data/forum/news";
import {BACKEND_BATH_URL} from "@/lib/constants";
import {type Comment as CommentType} from "@/lib/forum/types";
import Comment from "@/app/forum/_components/comment";
import {useUsersStore} from "@/hooks/forum/use-users-store";

// 强制每个请求动态渲染, no work
// export const dynamic = 'force-dynamic'

const Page = ({params}: { params: { id: string } }) => {
    const router = useRouter();

    // const {users: currentUsers} = useUsersStore()

    const [users, setUsers] = useState([])
    const [articles, setArticles] = useState([])
    useEffect(() => {
        (async () => {
            // @ts-ignore
            setUsers(await getUsers());
            // setUsers(currentUsers)
            setArticles(await getNews())
        })()
    }, [])

    const {id} = params
    const [post, setPost] = useState();
    useEffect(() => {
        (async () => {
            // const res = await fetch(`${BACKEND_BATH_URL}/posts/${id}`)
            const res = await fetch(`/api/posts/${id}`)
            const data = await res.json();

            setPost(data.post)
        })()
    }, [id])
    const [comments, setComments] = useState([])
    useEffect(() => {
        (async () => {
            // const res = await fetch(`${BACKEND_BATH_URL}/comments?postId=${id}`)
            const res = await fetch(`/api/comments/post/${id}`)
            const data = await res.json()
            setComments(data.comments)
        })()
    }, [id])

    return (
        <div>
            {/*</Head>*/}
            <main className={'flex min-h-screen mx-auto'}>
                {/*sidebar*/}
                <Sidebar/>

                {/*feed*/}
                <div
                    className={'xl:ml-[370px] border-l border-r border-gray-200 xl:min-w-[576px] ' +
                        // `sm:ml-[73px] flex-grow max-w-xl`}
                        `sm:ml-[73px] flex-grow max-w-3xl`}
                >
                    <div className={`flex items-center py-2 px-3 sticky top-0 space-x-2
                    z-50 bg-white border-b border-gray-200`}>
                        <div className={`hoverEffect`}
                             onClick={() => router.back()}>
                            <ArrowLeftIcon className={`size-5 `}/>
                        </div>
                        <h2 className={'text-lg sm:text-xl font-bold cursor-pointer'}>详情</h2>
                        <div className={`hoverEffect flex justify-center items-center px-0 ml-auto size-9`}>
                            <SparklesIcon className={'size-5'}/>
                        </div>
                    </div>

                    <Post post={post}/>

                    {comments && (
                        <div>
                            {comments.map((c: CommentType) => (
                                <Comment
                                    post={post}
                                    key={c.id} comment={c}/>
                            ))}
                        </div>
                    )}
                </div>

                {/*widgets*/}
                <Widgets
                    users={users}
                    articles={articles}/>

                {/*modal*/}
                <CommendModal/>
            </main>
        </div>
    );
};

export default Page;